@use './variables.scss' as *;

:root,
:host,
page {
  // prettier-ignore
  --safe-area-inset-top: env(safe-area-inset-top, 0PX);
  // prettier-ignore
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0PX);
  // prettier-ignore
  --safe-area-inset-left: env(safe-area-inset-left, 0PX);
  // prettier-ignore
  --safe-area-inset-right: env(safe-area-inset-right, 0PX);

  --spacing: 4px;

  --color-white: white;
  --color-black: black;
  --color-primary: #{$color-primary};
  --color-error: #{$color-error};
  --color-success: #{$color-success};
  --color-warning: #{$color-warning};

  --color-bg: #{$color-bg};
  --color-bg-grey: #{$color-bg-grey};
  --color-bg-hover: #{$color-bg-hover};
  --color-bg-mask: #{$color-bg-mask};

  --color-text: #{$color-text};
  --color-text-grey: #{$color-text-grey};
  --color-text-inverse: #{$color-text-inverse};
  --color-text-placeholder: #{$color-text-placeholder};
  --color-text-disabled: #{$color-text-disabled};

  --color-border: #{$color-border};

  --default-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto,
    'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
